<script setup>
import * as echarts from 'echarts'
import apiBigscreen  from "@/api/bigscreen.js"
import {onMounted, ref} from "vue";

const refEcharts = ref()
const chart = ref()
const data = ref([])

onMounted(async () => {
  data.value = await apiBigscreen.getRightTop()
  chart.value = echarts.init(refEcharts.value)
  chart.value.setOption({
    title: {
      text: '销售情况',
      left: 'center',
      textStyle: {
        color: '#fff',
        fontSize: 16,
        textShadowBlur: 10,
        textShadowColor: "#33ffff",
      }
    },
    legend: {
      top: "bottom",
    },
    tooltip: {
      show: true,
    },
    series: [
      {
        type: 'pie',
        data: data.value,
        center: ["50%", "45%"],
        roseType: "area",
        itemStyle: {
          normal: 10,
        }
      }
    ]
  })
})
</script>

<template>
  <div class="chart" ref="refEcharts"></div>
</template>

<style scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>